<template>
    <div class="integrity-box">
        <div id="printTest" style="margin: 10px;">
            <div style="width: 100%; text-align: center;">
                <h2 style="font-weight: 600;">xx食品药品审评查验中心审评员廉洁自律情况和满意度调查问卷</h2>
            </div>
            <div>
                <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;为帮助我们不断改进工作，提高服务质量，请您对我们的工作进行评价。
                您工作单位的名称是（签章）：</span>
                <a-input v-model:value="formState.fgzdw" :style="{ width: inputWid(value) }" class="input-botn-x work-unit"/>
                <span>；日期：</span>
                <a-input v-model:value="formState.year" class="input-botn-x date-v"/>
                <span>年</span>
                <a-input v-model:value="formState.month" class="input-botn-x date-v"/>
                <span>月</span>
                <a-input v-model:value="formState.sun" class="input-botn-x date-v"/>
                <span>日；</span>
                <span>性质是：</span>
                <!-- <compSelector
                    v-model="selectNature"
                    compType="Radio"
                    :defaultValue="selectNature"
                    dictionaryType="廉洁自律满意度性质"
                    :width="150"
                    @selectHandleChange="natureClick"
                    /> -->
                <span class="for-box-v"
                v-for="(item,index) in dictionaryList.natureList"
                :key="index" @click="natureClick(item)">
                    <span class="yeas-selected" v-if="selectNature === item.itemValue">
                        <span class="yeas-col"></span>
                    </span>
                    <span class="no-selected" v-else>
                        <!-- <span class="no-col"></span> -->
                    </span>
                    <span style="padding-left: 3px;">{{ item.itemText }}</span>
                    <span v-if="item.itemValue == '其他'">（请填写：
                        <vxe-textarea
                         v-model="natureOther"
                         @change="natureOtherChang"
                         :autosize="{ minRows: 1, maxRows: 100 }"
                         >
                        </vxe-textarea>）
                    </span>
                </span>
            </div>
            <div>
                <h3 style="font-weight: 600 !important;padding-top: 20px;">一、对中心的评价：</h3>
                <div>
                    <div v-for="(item,index) in dictionaryList.centralEvaluationList" :key="index">
                        <h3 >{{ index+1 }}、{{ item.itemText }}</h3>
                        <div v-if="item.itemText !== '其他意见建议和要求：'">
                            <compSelector
                                v-model="item.fpjjg"
                                compType="Radio"
                                :defaultValue="item.fpjjg"
                                dictionaryType="审评结果"
                                :width="150"
                                @selectHandleChange="centralEvaluationClick($event,item)"
                            />
                        </div>
                        <vxe-textarea
                         v-else
                         v-model="askValue"
                         @change="askChang"
                         :autosize="{ minRows: 1, maxRows: 100 }"
                         >
                        </vxe-textarea>
                    </div>
                </div>
            </div>
            <div>
                <h3 style="font-weight: 600 !important;padding-top: 20px;">二、对审评组的评价：</h3>
                <div class="table-box">
                    <div class="table-w">
                        <table border="1" style="width: 100%;">
                            <tr>
                                <th class="th-diagonal" style="width: 158px;">
                                    <div class="th-first">
                                        <span class="right-text">评价内容</span>
                                        <span>审评组</span>
                                    </div>
                                    <div class="diagonal"></div>
                                </th>
                                <th :style="{width:item.itemText !== '备注'?120+'px':'',minWidth:item.itemText == '备注'?180+'px':120+'px'}" v-for="(item,index) in dictionaryList.secondEvaluationList" :key="index">
                                    {{ item.itemText }}
                                </th>
                            </tr>
                            <tr v-for="(item,index) in jczPjList">
                                <td>
                                    {{item.fjcysf}}：<a-input v-model:value="value" class="input-botn-x name-v"/>
                                </td>
                                <td>
                                    <compSelector
                                        v-model="item.fpjjg"
                                        compType="Radio"
                                        :defaultValue="item.fpjjg"
                                        dictionaryType="审评结果"
                                        :width="150"
                                        @selectHandleChange="secondTableClick($event,item,0)"
                                    />
                                </td>
                                <td>
                                    <compSelector
                                        v-model="item.fpjjg"
                                        compType="Radio"
                                        :defaultValue="item.fpjjg"
                                        dictionaryType="审评结果"
                                        :width="150"
                                        @selectHandleChange="secondTableClick($event,item,1)"
                                    />
                                </td>
                                <td>
                                    <compSelector
                                        v-model="item.fpjjg"
                                        compType="Radio"
                                        :defaultValue="item.fpjjg"
                                        dictionaryType="审评结果"
                                        :width="150"
                                        @selectHandleChange="secondTableClick($event,item,2)"
                                    />
                                </td>
                                <td>
                                    <!-- 备注 -->
                                    <vxe-textarea
                                    v-model:value="item.fbz"
                                    :autosize="{ minRows: 1, maxRows: 100 }"
                                    @blur="fbzBlur(item,'fbz')"/>
                                </td>
                            </tr>
                        </table>
                    </div>

                </div>
                <div style="width: 100%;text-align: center;">（填写说明：请选择对应的评价；若‘不满意’，请在备注栏说明原因或另附纸张说明。）</div>
            </div>
            <div>
                <h3 style="font-weight: 600 !important;padding-top: 20px;">三、对审评组执行廉洁自律规范情况的评价：</h3>
                <div class="table-box">
                    <div class="table-w">
                        <table border="1" style="width: 100%;">
                            <tr>
                                <th class="th-diagonal">
                                    <div class="th-first">
                                        <span class="right-text">评价内容</span>
                                        <span>审评组</span>
                                    </div>
                                    <div class="diagonal"></div>
                                </th>
                                <th v-for="(item,index) in dictionaryList.specification" :key="index">
                                    {{ item.itemText }}
                                </th>
                            </tr>
                            <tr v-for="(item,index) in jczPjList">
                                <td>
                                    {{item.fjcysf}}：<a-input v-model:value="value" class="input-botn-x name-v"/>
                                </td>
                                <td>
                                    <compSelector
                                        v-model="item.fpjjg"
                                        compType="Radio"
                                        :defaultValue="item.fpjjg"
                                        dictionaryType="对审评组审评综合评价公正等级"
                                        :width="150"
                                        @selectHandleChange="secondTableClick($event,item,index)"
                                    />
                                </td>
                                <td v-if="index == 0" :rowspan="jczPjList.length">
                                    <compSelector
                                        v-model="item.fpjjg"
                                        compType="Radio"
                                        :defaultValue="item.fpjjg"
                                        dictionaryType="对审评组不合格项目疑异等级"
                                        :width="150"
                                        @selectHandleChange="secondTableClick($event,item,index)"
                                    />
                                </td>
                                <td v-if="index == 0" :rowspan="jczPjList.length">
                                    <compSelector
                                        v-model="item.fpjjg"
                                        compType="Radio"
                                        :defaultValue="item.fpjjg"
                                        dictionaryType="审评结果"
                                        :width="150"
                                        @selectHandleChange="secondTableClick($event,item,index)"
                                    />
                                </td>
                            </tr>
                            <tr>
                                <td>备注：</td>
                                <td colspan="3" >
                                    <vxe-textarea
                                    v-model:value="formState.fbz"
                                    :autosize="{ minRows: 1, maxRows: 100 }"
                                    @blur="fbzBlur(0,'fbz')"/>
                                </td>
                                <!-- rowspan="2" -->
                            </tr>
                        </table>
                    </div>

                </div>
                <div style="width: 100%;text-align: center;">（填写说明：请选择对应的评价；如有违规的情况请在备注栏注明或另附纸说明。）</div>
            </div>
            <div>
                <!-- 审评结束后十五日内填写盖章 -->
                <div>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        以上内容请于<a-input v-model:value="value" :style="{ width: inputWid(value) }" class="input-botn-x work-unit"/>
                        ，并邮寄至xx食品药品审评查验中心质量管理与科研科，地址：南宁市青秀区云景路32号xx食品药品审评查验中心1106室，
                        邮编530029，电话：0771-5828621）
                    </span>
                </div>
                <div>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        非常欢迎您对我们的工作提出宝贵意见和建议，如您愿意，请留下您的姓名和联系电话，以便我们及时和您沟通、联系，继续得到您的帮助。
                    </span>
                </div>
                <div>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        单位（企业）名称（签章）：<a-input v-model:value="value" :style="{ width: inputWid(value) }" class="input-botn-x work-unit"/>
                        审评时间：<a-input v-model:value="value" style="width:200px" class="input-botn-x work-unit"/>
                    </span>
                </div>
                <div>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        单位（企业）负责人（签字）：<a-input v-model:value="value" style="width:200px" class="input-botn-x work-unit"/>
                        联系电话：<a-input v-model:value="value" style="width:200px" class="input-botn-x work-unit"/>
                    </span>
                </div>
            </div>
        </div>
        <button v-print="printObj">打印</button>
    </div>
</template>
<script>
import { querySqsxLjzlMydObject } from './service/index'
import {
    ocalityPostAction,
    editLjzlMyd
} from './service/index'
import compSelector from '@/components/compSelector/compSelector'
export default {
    components:{
        compSelector
    },
    props:{

    },
    computed: {
        inputWid() {
            return function (value) {
                if (!value || (value.length <= 10)) {
                    return '180px'
                } else {
                // 有内容，字符串长度*字体大小
                if((String(value).length * 13 + 30) >= String(this.screenWidth)){
                    return this.screenWidth - 30 + 'px'
                }else{
                    return  (String(value).length * 13 + 30) + 'px'
                }

                }
            }
        }
    },
    data(){
        return{
            selectNature:'',
            natureOther:'',
            askValue:'',
            formState:{
                fgzdw:'',//工作单位
                ftxrq:'',//日期
                year:'',
                month:'',
                sun:'',
                fxz:'',//性质,
                fyjhyq:'',//意见和要求
                fqymc:'',//企业，
                fjcsj:'',//审评时间
                fqyfzr:'',//负责人
                flxdh:'',//联系电话
            },
            //对中心的评价
            evaluate:{
                fpjbt:'',//评价的标题
                fpjjg:'',//评价的结果
                id:'',//问卷id还是题目id？
            },
            //对核查员评价
            inspectorEva:{
                fjcyxm:'',//审评员姓名
                fsfygzxyq:'',//是否严格执行相关要求
                fywnl:'',//审评小组业务能力
                fzxqk:'',//廉洁自律执行情况
                fzhpj:'',//综合评价
            },

            screenWidth: document.body.clientWidth,
            value:'',
            printObj:{
                id:"printTest", //需要打印的id名称
                popTitle:"问卷调查",//文档的名称
                beforeOpenCallback (vue) {
                    //console.log('打开之前')
                },
                closeCallback (vue) {
                    //console.log('关闭了打印工具')
                }
            },
            dictionaryList:{
                natureList:[],
                centralEvaluationList:[],
                secondEvaluationList:[],
                specification:[]
            },
            dictionaryData:[{
                name:'廉洁自律满意度性质',
                key:'natureList'
            },{
                name:'审评员廉洁自律满意度问卷对中心评价标题',
                key:'centralEvaluationList',

            },{
                name:'审评员廉洁自律满意度问卷对审评组评价标题',
                key:'secondEvaluationList',
            },{
                name:'对审评组规范情况评价标题',
                key:'specification'
            }],
            jczPjList:[],
        }
    },
    watch:{

    },
    mounted(){
        //console.log('获取路由的值',this.$route)

        querySqsxLjzlMydObject({sqsxid:this.$route.query.id}).then(res=>{
            if(res.code == 200){
                //console.log('初始化',res)
                this.jczPjList = res.result.jczPjList
            }
        })
        this.getOcalityPostAction()
    },
    methods:{
        getOcalityPostAction(){//字典
            this.dictionaryData.forEach(item => {
                ocalityPostAction({dictName:item.name}).then(res=>{
                    if(res.code == 200){
                        //console.log(res)
                        if(item.key == 'natureList' && res.result.length){
                            res.result[res.result.length] = {itemValue:'其他',itemText:'其他'}
                        }
                        if(item.key == 'centralEvaluationList' && res.result.length){
                            res.result[res.result.length] = {itemValue:'其他意见建议和要求：',itemText:'其他意见建议和要求：'}
                            res.result = res.result.map(item => ({...item,fpjjg:''}))
                        }
                        this.dictionaryList[item.key] = res.result
                    }else{
                        this.dictionaryList[item.key] = []
                    }
                })
            });
        },
        natureClick(val){//选择性质
            this.selectNature = val.itemText
            //console.log('val',val)
            if(this.selectNature == '其他'){
                this.formState.fxz = this.natureOther
            }else{
                this.formState.fxz = val.itemText
            }
        },
        natureOtherChang(){//性质其他
            if(this.selectNature == '其他'){
                this.formState.fxz = this.natureOther
            }
        },
        centralEvaluationClick(val,item){//对中心的评价
            //console.log(val,item)
        },
        askChang(){//中心的评价要求

        },
        secondTableClick(val,item,titleIndex){//核查员评价1
        },
        fbzBlur(item,key){//备注
            if(item){//表格1的备注

            }else{//表格2的备注

            }

        }
    }
}
</script>
<style lang="less">
.integrity-box{
    height: calc(100vh - 50px);
    padding-bottom: 50px;
    overflow-y: auto;
    .input-botn-x{
    border:0 !important;
    border-bottom: 1px solid #000 !important;
    }
    .work-unit{
        max-width: 300px;
    }
    .date-v{
        width: 55px;
    }
    .name-v{
        width: 80px;
    }
    .ant-input:hover,.ant-input:focus{
        border:0 !important;
        box-shadow:none !important;
        border-bottom: 1px solid #000 !important;
    }
    .for-box-v{
        margin-left: 10px;
        position: relative;
        .no-selected,.yeas-selected{
            padding-right: 5px;
            position: relative;
            top: 3px;
            display: inline-block;
            font-size: 20px;
            padding-right: 5px;
            height: 14px;
            width: 14px;
            border: 1px solid #797474;
            border-radius:50%;
            text-align: center;
        }
        .yeas-selected{

            border: 1px solid #1890ff;
        }
        .yeas-col,.no-col{
            position: absolute;
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            border: 1px solid #333;
            top: 2px;
            left: 2px;
        }
        .yeas-col{
            border: 1px solid #1890ff;
            background-color: #1890ff;
        }
    }
}
.th-diagonal{
    position: relative;
    overflow: hidden;
    .th-first{
        width: 130px !important;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        span{
            display: inline-block;
            width: 100%;
        }
        .right-text{
            text-align: right;
        }
    }

}
.th-diagonal{
    background-image: linear-gradient(to bottom left, white 49%, #000, white 51%);
}
.table-box{
    overflow: hidden;
    .table-w{
        overflow: auto;
        td{
            padding: 10px;
        }
    }
}


</style>
